<template>
    <div class="map1 " id="map1">
        <div class="map" v-if="!mydata">
            <Amap :marker="data" v-if="data.length" :func="showding" :mapoption="Imap"></Amap>
        </div>
        <div class="map" v-else>
            <Mydataamap :marker="data" v-if="data.length" :func="showding"></Mydataamap>
        </div>
        <el-dialog class="el-dialog2" :show-close="false" v-model="dialogVisible" width="640px" :modal="false"
            :lock-scroll="false" :draggable="false">
            <template #header class="el-dialogheader">
                <div class="el-dialog-header row">
                    <div class="col-8">{{ school }}</div>
                    <div class="col-4">
                        <a :href="`/#/team/${teamid}/teamdata/rank`" class="href" target="_blank">查看详情>>
                        </a>
                    </div>
                    <div class="lan"></div>
                </div>
            </template>
            <schoolVue :char1="_char1" :team="teamdata"></schoolVue>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { assign, forEach } from 'lodash-es';
import { computed, ref, reactive, inject } from 'vue';
import { asyncselectscienceteamid } from '../api';
import Amap from '../components/amap.vue'
import Mydataamap from '../components/mydataamap.vue'
import { IDate } from '../interface';
import FetchApi from '../logs/api';
import schoolVue from './school.vue';
import Studycodemodel from '../mysql_interface/studycodemodel';
import { Iteamdata } from './type';
import { ElDialog } from 'element-plus';
const icon1 = 'https://cdn.hterobot.com/JOY/image/pin1-enable.svg'
const icon2 = 'https://cdn.hterobot.com/JOY/image/pin1-disable.svg'
const p = defineProps<{ team: Studycodemodel.Iteam[], starttime: Date, endtime: Date, timetype: string, char7: { count: number, ID: number }[], mydata?: boolean }>()
const data = computed<Studycodemodel.Iteamhome[]>(() => {
    return p.team.map(e => e.teamhome).flat().filter(e => e?.longitude && e?.dimension).map(c => {
        const { teamid } = c || {}
        if (teamid) {
            const id = p.char7.find(t => t.ID === teamid)
            if (id) {
                return assign(c, { icon: icon1 })
            }
            return assign(c, { icon: icon2 })
        }
        return assign(c, { icon: icon2 })
    })
})

const teamid = ref(0)

const team = computed(() => {
    return p.team.find(e => e.ID === teamid.value)
})

const school = computed(() => {
    try {
        const { school } = team.value?.teamhome || {}
        if (school) {
            return school
        }
    } catch (e) {
        return team.value?.name
    }
})

const query1 = ref<{ count: number, day: string }[]>([])
const char1 = ref<{ count: number, day: string }[]>([])



const _char1 = computed(() => {
    const key: IDate[] = []
    forEach(char1.value, (e) => {
        key.push({ day: e.day, count: Number(e.count), type: '测评次数' })
    })
    forEach(query1.value, e => {
        key.push({ day: e.day, count: Number(e.count), type: '观看视频数' })
    })
    const data = key.sort((a, b) => Number(a.day) - Number(b.day))
    return data
})
const Imap = inject<any>('Imap')


const teamdata = reactive<Iteamdata>({
    // ac次数
    account: 0,
    // ac 测试点数
    actestcase: 0,
    // 测试点ac率
    testcaselv: 0,
    // 提交测试次数
    testuser: 0,
    // 观看视频数量
    videouser: 0,
    // 任务完成率
    riwulv: 0,
    // 测评正确lv
    testlv: 0,
    // 测评 观看视频 按月分布
    char1: [],
    // 测试点数量
    testcase: 0,
    // 测评标签
    label1: [],
    // 测评ac标签
    label2: [],
    // 人数
    usercount: 0,
})

async function showding(v: number) {
    teamid.value = v
    const data: any = await asyncselectscienceteamid({ teamid: v, starttime: p.starttime, endtime: p.endtime, timetype: p.timetype })
    let query = `* and type:video and _teamids_:${v} | select   date_format(__time__, '${p.timetype}') as day,  count(_userid_) as count group by day order by day`
    let query3 = `* and type:video and _teamids_:${v} | select  count(_userid_) as count `
    FetchApi({
        from: dayjs(p.starttime).toDate(),
        to: dayjs(p.endtime).toDate(),
        query: query,
        projectName: "htetest1",
        logstoreName: "ojhte",
        reverse: true
    }).then(e => {
        query1.value = e.data
    })
    FetchApi({
        from: dayjs(p.starttime).toDate(),
        to: dayjs(p.endtime).toDate(),
        query: query3,
        projectName: "htetest1",
        logstoreName: "ojhte",
        reverse: true
    }).then(e => {
        teamdata.videouser = e.data[0].count
    })
    teamdata.account = Number(data[2][0][0].resultdatacount) || 0
    teamdata.testcase = Number(data[2][0][0].counttestcase) || 0
    teamdata.actestcase = Math.floor(Number(data[2][0][0].sumac)) || 0
    teamdata.testcaselv = Number(Number(teamdata.actestcase / teamdata.testcase * 100).toFixed(2)) || 0
    teamdata.testuser = data[2][0][0].count || 0
    teamdata.riwulv = Number((Number(data[5][0][0].account) / data[5][0][0].count * 100).toFixed(2)) || 0
    teamdata.usercount = Number(data[5][0][0].count) || 0
    teamdata.testlv = Number((Number(teamdata.account) / teamdata.testuser * 100).toFixed(2)) || 0
    char1.value = data[4][0]
    teamdata.label1 = data[1][0]
    teamdata.label2 = data[3][0]
    dialogVisible.value = true

}

const dialogVisible = ref(false)

defineExpose({
    showding
})

</script>

<style scoped>
.map1 {
    margin: 0 auto;
    min-height: calc(100vh - 94px - 24px - 24px);
    width: calc(100vw - 666px - 666px - 24px - 24px - 12px);
    height: 1147px;
    min-width: 100%;

}

.map {
    width: 100%;
    height: 100%;
}



.el-dialog-header {
    font-family: 'FZZongYi-M05S';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    padding-bottom: 12px;
}


.lan {
    width: 12px;
    height: 3px;
    background: linear-gradient(315deg, #0670F8 0%, #34C7FC 100%);
    position: absolute;
    right: 0;
    bottom: 0;

}

.col-4 {
    text-align: right;
}

.href {
    color: #fff;
    transition: all 0.3s;
    font-size: 12px;
}

.href:hover {
    color: #0a58ca;
}
</style>

<style>
#map1 .el-dialog2 {
    border: 0.2px solid #FFFFFF;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    /* Note: backdrop-filter has minimal browser support */

    border-radius: 12px;
    --el-bg-color: rgba(42, 44, 59, 0.95);
    --el-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    --el-dialog-border-radius: 12px;
    --el-dialog-padding-primary: 0px;
}

#map1 .el-dialog2 .el-dialog__header {
    padding: 12px;
}

#map1 .el-overlay-dialog {
    position: fixed !important;
}
</style>